<template>
  <div>
    <!--搜索表单和添加表单-->
    <div style="display: flex;margin-bottom: 10px">
      <div style="width: 220px">
        <el-button type="primary" style="margin-left: 5px" @click="add">添加新教师</el-button>
        <el-popconfirm title="你确定删除所选教师信息吗？" @confirm="deleteSelected">
          <el-button slot="reference" type="danger" style="margin-left: 5px">删除所选教师</el-button>
        </el-popconfirm>
      </div>
      <div style="flex: 1;text-align: right">
        <el-input v-model="params.tno" clearable placeholder="请输入教工号"
                  style="width: 130px;margin-left: 5px"></el-input>
        <el-input v-model="params.tname" clearable placeholder="请输入姓名"
                  style="width: 130px;margin-left: 5px"></el-input>
        <el-input v-model="params.tsex" clearable placeholder="请输入性别"
                  style="width: 130px;margin-left: 5px"></el-input>
        <el-input v-model="params.tage" clearable placeholder="请输入年龄"
                  style="width: 130px;margin-left: 5px"></el-input>
        <el-input v-model="params.teb" clearable placeholder="请输入学历"
                  style="width: 130px;margin-left: 5px"></el-input>
        <el-input v-model="params.tpt" clearable placeholder="请输入职称"
                  style="width: 130px;margin-left: 5px"></el-input>
        <el-button class="el-icon-search" type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
        <el-button class="el-icon-refresh" type="primary" style="margin-left: 5px" @click="reset">重置</el-button>
      </div>
    </div>

    <!--主体-->
    <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange"
              :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" stripe>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="tno" fixed="left" label="教工号" width="80px"></el-table-column>
      <el-table-column prop="tname" fixed="left" label="姓名" width="80px"></el-table-column>
      <el-table-column prop="tsex" label="性别" width="80px"></el-table-column>
      <el-table-column prop="tage" label="年龄" width="80px"></el-table-column>
      <el-table-column prop="teb" label="学历" width="120px"></el-table-column>
      <el-table-column prop="tpt" label="职称" width="120px"></el-table-column>
      <el-table-column prop="cno1" label="主讲课程一(课程号)" width="130px"></el-table-column>
      <el-table-column prop="cno1name" label="主讲课程一(课程名)" width="130px"></el-table-column>
      <el-table-column prop="cno2" label="主讲课程二(课程号)" width="130px"></el-table-column>
      <el-table-column prop="cno2name" label="主讲课程二(课程名)" width="130px"></el-table-column>
      <el-table-column prop="cno3" label="主讲课程三(课程号)" width="130px"></el-table-column>
      <el-table-column prop="cno3name" label="主讲课程三(课程名)" width="130px"></el-table-column>
      <el-table-column prop="status" fixed="right" width="70px" label="账号状态">
        <template v-slot="scope">
          <el-switch v-model="scope.row.status === '1' ? true : false"
                     @change="statusChange(scope.row.tno,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="140px" label="操作">
        <template v-slot="scope">
          <!--scope.row就是当前行数据-->
          <el-button type="primary" @click="edit(scope.row.tno)">编辑</el-button>
          <el-popconfirm title="你确定删除该教师信息吗？" @confirm="del(scope.row.tno)">
            <el-button slot="reference" type="danger" style="margin-left: 5px">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--新增弹出框-->
    <el-dialog title="新增教师信息" :visible.sync="dialogVisibleforadd" top="5vh" width="40%">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="教工号" prop="tno">
          <el-input v-model="form.tno" clearable style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="tname">
          <el-input v-model="form.tname" clearable style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="tsex">
          <el-radio v-model="form.tsex" label="男"></el-radio>
          <el-radio v-model="form.tsex" label="女"></el-radio>
        </el-form-item>
        <el-form-item label="年龄" prop="tage">
          <el-input v-model="form.tage" clearable style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="teb">
          <el-select v-model="form.teb" style="width: 50%" placeholder="请选择学历">
            <el-option
                v-for="item in tebs"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职称" prop="tpt">
          <el-select v-model="form.tpt" style="width: 50%" placeholder="请选择职称">
            <el-option
                v-for="item in tpts"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主讲课程一" prop="cno1">
          <el-select @change="isSelectedOne" v-model="form.cno1name" style="width: 50%;margin-right: 10px"
                     placeholder="请选择主讲课程">
            <el-option
                v-for="item in courses"
                :label="item.cname"
                :value="item.cname">
            </el-option>
          </el-select>
          课程号
          <el-input v-model="form.cno1" disabled style="width: 30%;margin-left: 10px"></el-input>
        </el-form-item>
        <el-form-item label="主讲课程二" prop="cno2">
          <el-select @change="isSelectedTwo" v-model="form.cno2name" style="width: 50%;margin-right: 10px"
                     placeholder="请选择主讲课程">
            <el-option
                v-for="item in courses"
                :label="item.cname"
                :value="item.cname">
            </el-option>
          </el-select>
          课程号
          <el-input v-model="form.cno2" disabled style="width: 30%;margin-left: 10px"></el-input>
        </el-form-item>
        <el-form-item label="主讲课程三" prop="cno3">
          <el-select @change="isSelectedThree" v-model="form.cno3name" style="width: 50%;margin-right: 10px"
                     placeholder="请选择主讲课程">
            <el-option
                v-for="item in courses"
                :label="item.cname"
                :value="item.cname">
            </el-option>
          </el-select>
          课程号
          <el-input v-model="form.cno3" disabled style="width: 30%;margin-left: 10px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="addSave">确 定</el-button>
  </span>
    </el-dialog>

    <!--编辑弹出框-->
    <el-dialog title="编辑教师信息" :visible.sync="dialogVisibleforedit" top="5vh" width="40%">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="教工号" prop="tno">
          <el-input v-model="form.tno" disabled clearable style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="tname">
          <el-input v-model="form.tname" clearable style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.tsex" label="男"></el-radio>
          <el-radio v-model="form.tsex" label="女"></el-radio>
        </el-form-item>
        <el-form-item label="年龄" prop="tage">
          <el-input v-model="form.tage" clearable style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="form.teb" placeholder="请选择学历">
            <el-option
                v-for="item in tebs"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职称">
          <el-select v-model="form.tpt" placeholder="请选择职称">
            <el-option
                v-for="item in tpts"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主讲课程一">
          <el-select @change="isSelectedOne" v-model="form.cno1name" style="width: 50%;margin-right: 10px"
                     placeholder="请选择主讲课程">
            <el-option
                v-for="item in courses"
                :label="item.cname"
                :value="item.cname">
            </el-option>
          </el-select>
          课程号
          <el-input v-model="form.cno1" disabled style="width: 30%;margin-left: 10px"></el-input>
        </el-form-item>
        <el-form-item label="主讲课程二">
          <el-select @change="isSelectedTwo" v-model="form.cno2name" style="width: 50%;margin-right: 10px"
                     placeholder="请选择主讲课程">
            <el-option
                v-for="item in courses"
                :label="item.cname"
                :value="item.cname">
            </el-option>
          </el-select>
          课程号
          <el-input v-model="form.cno2" disabled style="width: 30%;margin-left: 10px"></el-input>
        </el-form-item>
        <el-form-item label="主讲课程三">
          <el-select @change="isSelectedThree" v-model="form.cno3name" style="width: 50%;margin-right: 10px"
                     placeholder="请选择主讲课程">
            <el-option
                v-for="item in courses"
                :label="item.cname"
                :value="item.cname">
            </el-option>
          </el-select>
          课程号
          <el-input v-model="form.cno3" disabled style="width: 30%;margin-left: 10px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleforedit = false">取 消</el-button>
    <el-button type="primary" @click="editSave">确 定</el-button>
  </span>
    </el-dialog>

    <!--分页-->
    <div style="margin-top: 10px">
      <el-pagination
          background
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request1 from "@/utils/request1";

export default {
  name: "Teacher",
  data() {
    const checkAge = (rule, value, callback) => {
      if (!value) {
        callback(new Error('年龄不能为空'))
      }
      if (!/^[0-9]*$/.test(value)) {
        callback(new Error('请输入数字值'));
      }
      if (parseInt(value) < 24 || parseInt(value) > 60) {
        callback(new Error('年龄只能为24-60范围内'));
      }
      callback();
    };
    return {
      dialogVisibleforadd: false,
      dialogVisibleforedit: false,
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
        tno: '',
        tname: '',
        tsex: '',
        tage: '',
        teb: '',
        tpt: ''
      },
      form: {},
      tableData: [],     //表格数据
      courses: [],      //课程数据
      multipleSelection: [],
      tebs: [
        {
          label: '学士',
          value: '学士'
        }, {
          label: '硕士',
          value: '硕士'
        }, {
          label: '博士',
          value: '博士'
        }],     //学历
      tpts: [
        {
          label: '助教',
          value: '助教'
        }, {
          label: '讲师',
          value: '讲师'
        }, {
          label: '副教授',
          value: '副教授'
        }, {
          label: '教授',
          value: '教授'
        }],     //职称
      rules: {
        tno: [
          {required: true, message: '请输入教工号', trigger: 'blur'},
        ],
        tname: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
        ],
        tsex: [
          {required: true, message: '请选择性别', trigger: 'blur'},
        ],
        tage: [
          {validator: checkAge, trigger: 'blur'},
        ],
        teb: [
          {required: true, message: '请选择学历', trigger: 'blur'},
        ],
        tpt: [
          {required: true, message: '请选择职称', trigger: 'blur'},
        ],
        cno1: [
          {required: true, message: '请选择主讲课程一', trigger: 'blur'},
        ],
        cno2: [
          {required: true, message: '请选择主讲课程二', trigger: 'blur'},
        ],
        cno3: [
          {required: true, message: '请选择主讲课程三', trigger: 'blur'},
        ],
      }
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request1.get('/teacher/page', {params: this.params}).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
      request1.get('/teacher/getAllCourse').then(res => {
        this.courses = res.data
        this.courses.push({cno: "无", cname: "无", cpno: "无", ccredit: "无"})
      })
    },
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        tno: '',
        tname: '',
        tsex: '',
        tage: '',
        teb: '',
        tpt: ''
      }
      this.load()
    },
    add() {
      this.dialogVisibleforadd = true
      if (this.$refs['ruleForm'] !== undefined) {
        this.$refs['ruleForm'].resetFields()
      }
      this.form = {}
    },
    addSave() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          request1.post('/teacher/save', this.form).then(res => {
            if (res.code === '200') {
              this.$notify.success("新增成功")
              this.dialogVisibleforadd = false
              this.load()
            } else {
              this.$notify.error('新增失败')
            }
          })
        } else {
          this.$notify.warning('请填写全部信息')
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum
      this.load()
    },
    del(tno) {
      request1.delete('/teacher/delete/' + tno).then(res => {
        if (res.code === '200') {
          this.$notify.success('删除成功')
          this.load()
        } else {
          this.$notify.error(res.msg)
        }
      })
    },
    edit(tno) {
      this.dialogVisibleforedit = true
      if (this.$refs['ruleForm'] !== undefined) {
        this.$refs['ruleForm'].resetFields()
      }
      request1.get('/teacher/' + tno).then(res => {
        this.form = res.data
      })
    },
    editSave() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          request1.put('/teacher/update', this.form).then(res => {
            if (res.code === '200') {
              this.$notify.success("编辑成功")
              this.dialogVisibleforedit = false
              this.load()
            } else {
              this.$notify.error('编辑失败')
            }
          })
        } else {
          this.$notify.warning('请填写全部信息')
        }
      })
    },
    cancel() {
      this.dialogVisibleforadd = false
      this.$refs['ruleForm'].resetFields()
    },
    isSelectedOne(val) {
      if (val === '无') {
        this.form.cno1 = val
      } else {
        request1.get('/teacher/getCnoByCname/' + val).then(res => {
          this.form.cno1 = res.data
          this.$forceUpdate()
        })
      }
    },
    isSelectedTwo(val) {
      if (val === '无') {
        this.form.cno2 = val
      } else {
        request1.get('/teacher/getCnoByCname/' + val).then(res => {
          this.form.cno2 = res.data
          this.$forceUpdate()
        })
      }
    },
    isSelectedThree(val) {
      if (val === '无') {
        this.form.cno3 = val
      } else {
        request1.get('/teacher/getCnoByCname/' + val).then(res => {
          this.form.cno3 = res.data
          this.$forceUpdate()
        })
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteSelected() {
      if (this.multipleSelection.length === 0) {
        this.$notify.success('请勾选要删除的选项')
      } else {
        request1.post('/teacher/deleteSelected', this.multipleSelection).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功')
            this.load()
          } else {
            this.$notify.success('删除失败')
          }
        })
      }
    },
    statusChange(tno, status) {
      request1.get('/teacher/statusChange/' + tno).then(res => {
        if (status === '1') {
          this.$notify.success('账号已禁用')
        } else {
          this.$notify.success('账号已启用')
        }
        this.load()
      })
    }
  }
}
</script>
